<template>
	<view class="nav-bar-white">
		<view :style="{height:statusBarHeight+'px'}"></view>
		<uni-nav-bar left-icon="left" background-color="#FFF" color="#000" @clickLeft="back" title="商品分类" :border="false" fixed="true"></uni-nav-bar>
	</view>
	<view :style="{marginTop:statusBarHeight+45+'px'}" style="padding-top: 10rpx;">
		<uni-collapse v-for="(item,index) in typeList" :key="index">
			<uni-collapse-item :title="item.name">
				<view v-for="(child,ci) in item.child" :key="ci">
					<view class="child-item" @click="childItemClick(item,child)">
						<text>{{child.name}}</text>
					</view>
				</view>
			</uni-collapse-item>
		</uni-collapse>
	</view>
</template>

<script>
	import { useUserStore } from '../../store/userStore';
	export default {
		data() {
			return {
				typeList:[
					{
						id:'1',
						name:'饮料饮品',
						child:[
							{
								pid:'1',
								name:'可乐'
							},
							{
								pid:'2',
								name:'红酒'
							},
							{
								pid:'3',
								name:'豆奶'
							}
						]
					},
					{
						id:'2',
						name:'健康运动',
						child:[
							{
								pid:'1',
								name:'篮球'
							},
							{
								pid:'2',
								name:'足球'
							},
							{
								pid:'3',
								name:'排球'
							}
						]
					}
				]
			};
		},
		computed:{
			statusBarHeight(){
				return useUserStore().statusBarHeight
			}
		},
		methods:{
			childItemClick(item,child){
				console.log(item.name)
				console.log(child.name)
				let name = item.name + '>' + child.name
				uni.$emit('backGoodsType', name)
				uni.navigateBack({
					delta: 1
				})
				
			},
			back(){
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
.child-item{
	height: 90rpx;
	padding-left: 40rpx;
	background-color: #F4F5F7;
	width: 100%;
	font-size: 30rpx;
	display: flex;
	align-items: center;
}
</style>
